<template>
  <page-wrap ref="pageWrap" hideTab back title="预约顾问" :showTop="false" :dark="loaded ? false : true" :hideSafeArea="true">
    <view class="book-consultant" :style="'padding-top:' + navHeight + 'px;'">
      <view class="serve-time">
        <span>在线顾问服务时间上午9:00-12:00，下午14:00-18:00</span>
      </view>
      <view class="choose-day">
        <scroll-view :scroll-x="true" class="scrollview-box">
          <view :class="[selecetedDay == -1 ? 'day-button-selected' : 'day-button']" @click="showAllConsultant"
            style="margin-left: 20rpx">
            <span>全部</span>
            <span>顾问</span>
          </view>
          <block v-for="(item, index) in nextSevenDays" :key="index">
            <view :class="[
              index === selecetedDay ? 'day-button-selected' : 'day-button',
            ]" @click="changeselecetedDay(item, index)">
              <span>{{
                index === 0 ? "今天" : nextSevenDays[index].weekDay
              }}</span>
              <span>{{ nextSevenDays[index].day }}</span>
            </view>
          </block>
        </scroll-view>
      </view>
      <view class="line"></view>
      <view class="choose-consultant">
        <scroll-view :scroll-y="true" class="scrollview-consultant" @scrolltolower="loadMore">
          <view class="consultant-card" v-for="(item, index) in consultants" :key="index"
            @click="jumpToConsultantDetail(item.consultantId)">
            <view class="gotoBook" v-if="item.appointmentStatus === 10"
              @click.stop="jumpToConsultantDetailNew(item.consultantId)">
              <text class="text">预约</text>
              <text class="text" v-if="item.appointmentStatus === 0">顾问信息</text>
              <image class="white-arrow" :src="whiteArrow"></image>
            </view>
            <view class="connotBook" v-else>
              <text class="text" v-if="item.appointmentStatus === 40">放假</text>

              <text class="text" v-else>满约</text>
            </view>
            <view class="header">
              <view class="avatar-box">
                <image class="avatar" :src="item.consultantPic || consultantAvatar"></image>
                <view class="status">{{
                  item.isOnline == 1 ? "在线" : ""
                }}</view>
              </view>
              <view class="info-box">
                <view class="name-box">
                  <text class="name">{{ item.consultantName }}</text>
                  <image class="vip" :src="consultantVip"></image>
                </view>
                <view class="number-box">
                  <image class="star" :src="consultantStar"></image>
                  <text class="name">{{ item.showRateScore || "5.0" }}</text>
                  <text class="line"></text>
                  <text class="text">服务过</text>
                  <text class="count">{{ item.serviceCount || "500" }}+</text>
                  <text class="text">人</text>
                </view>
                <view class="tag-box">
                  <view class="tag" v-for="_item in item.consultantTag.split('|')" :key="_item">{{ _item }}</view>
                </view>
              </view>
            </view>
            <view class="comment-box">
              <view class="message-box">
                <image class="message" :src="commentNew"></image>
                <text class="text">好评：</text>
              </view>
              <text class="comment">{{ item.positiveDesc || consultantInfo.comment || "" }}</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </page-wrap>
</template>

<script>
import { env } from "@/api/root";
import { getConsultantList } from "@/api/index";
import { getUserInfo } from "@/api/modules/career";
export default {
  components: {},
  data() {
    return {
      navHeight: getApp().globalData.navHeight,
      nextSevenDays: [],
      selecetedDay: 0,
      consultantStar: this.$imgBase + "careerPath/consultantStar.png",
      consultantVip: this.$imgBase + "careerPath/consultantVip.png",
      consultantChat: this.$imgBase + "careerPath/consultantChat.png",
      commentNew: this.$imgBase + "careerPath/commentNew.png",
      consultantAvatar: this.$imgBase + "careerPath/consultantAvatar.png",
      onlineChat: this.$imgBase + "careerPath/onlineChat.png",
      whiteArrow: this.$imgBase + "careerPath/whiteArrow.png",
      consultantInfo: {
        iname: "职业顾问",
        star: "5.0",
        serviceCount: "500",
        consultantTagList: ["简历辅导", "职业规划", "1v1服务"],
        comment:
          "挖掘精准，非常感谢顾问的耐心的服务，帮我找出了很多我以前没注意到的重要部分",
      },
      consultants: [],
      isLoadMore: false, //是否加载中
      pageInfo: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      currentDate: "",
      currentConsultantId: "", // 当前选中顾问id
      info: {},
    };
  },
  onShow() {
    // this.getUserInfoFn();
  },
  onHide() { },
  created() {
    this.getNextWeek();
    this.currentDate = this.nextSevenDays[0].fullDay;
    this.getUserInfoFn();
  },
  mounted() {
    // this.getConsultantList(20);
  },
  methods: {
    dayStatus(item) {
      switch (key) {
        case 10:
          return "可预约";
        case 30:
          return "约满";
        case 40:
          return "放假";
        default:
          break;
      }
    },
    getNextWeek() {
      const days = 7; // 近7天
      const week = ["日", "一", "二", "三", "四", "五", "六"]; // 星期

      const dateList = Array.from({ length: days }, (v, i) => i).map((day) => {
        const date = new Date();
        date.setDate(date.getDate() + day);
        let tempMonth = Number(date.getMonth()) + 1;
        let tempDay = date.getDate();
        if (tempMonth < 10) {
          tempMonth = "0" + tempMonth;
        }
        if (tempDay < 10) {
          tempDay = "0" + tempDay;
        }
        console.log("tempDay", tempDay);
        return {
          day: tempMonth + "-" + tempDay,
          weekDay: "周" + week[date.getDay()],
          fullDay: date.getFullYear() + "-" + tempMonth + "-" + tempDay,
        };
      });
      this.nextSevenDays = dateList;
    },
    changeselecetedDay(item, index) {
      this.selecetedDay = index;
      this.currentDate = item.fullDay;
      this.consultants = [];
      this.pageInfo = {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      };
      this.getConsultantList(20);
    },
    showAllConsultant() {
      this.selecetedDay = -1;
      this.pageInfo = {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      };
      this.currentDate = "";
      this.consultants = [];
      this.getConsultantList(10);
    },
    async getConsultantList(searchConsultantRange) {
      console.log("这里getConsultantList开始执行");
      const params = {
        pageNo: this.pageInfo.pageNo,
        pageSize: this.pageInfo.pageSize,
        searchDate: this.currentDate,
        searchConsultantRange: searchConsultantRange,
        startTime: this.currentDate,
        endTime: this.currentDate,
        cardType: this.info.cardType || 6,
      };
      const res = await getConsultantList(params);
      if (res.code === 200) {
        this.consultants = [...this.consultants, ...res.data];
        this.pageInfo.total = res.pageparam.sums;
      }
      console.log("this.consultants", this.consultants);
      console.log("res.data", res.data);
      console.log("params", params);
    },
    loadMore() {
      console.log("触底了");
      if (this.pageInfo.pageNo * this.pageInfo.pageSize < this.pageInfo.total) {
        this.pageInfo.pageNo = this.pageInfo.pageNo + 1;
        if (this.selecetedDay === -1) {
          this.getConsultantList(10);
        } else {
          this.getConsultantList(20);
        }
      } else {
        console.log("没有最新啦");
      }
    },
    getUserInfoFn() {
      // 这个uid一定要传，因为在interceptors中，没有传参的请求的请求头不会带上uid，而这个请求一定要uid
      getUserInfo({ uid: "" }).then((res) => {
        if (res.code == 200) {
          this.info = res.data;
          console.log("this.info", this.info);
          console.log("这里getUserInfo执行完毕");
          this.getConsultantList(20);
        }
      });
    },
    jumpToConsultantDetail(consultantId) {
      this.currentConsultantId = consultantId;
      uni.navigateTo({
        url:
          "/pagesSub/userCenter/careerPathV2/components/ConsultantDetail?personId=" +
          this.currentConsultantId,
      });
    },
    jumpToConsultantDetailNew(consultantId) {
      this.currentConsultantId = consultantId;
      uni.navigateTo({
        url:
          "/pagesSub/userCenter/careerPathV2/components/ConsultantDetail?showPopup=true&&personId=" +
          this.currentConsultantId,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
$img-base-person: $img-base + "careerPath/";

.book-consultant {
  width: 100%;
  background-image: url($img-base + "careerPath/consultantHallBg.png?v=2");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-color: #fff5ea;

  .serve-time {
    width: 100%;
    height: 72rpx;
    background-color: #fff3eb;
    color: #ff670f;
    padding: 14rpx 26rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .choose-day {
    width: 100%;
    height: 180rpx;
    padding: 16rpx 0rpx;
    box-sizing: border-box;

    .scrollview-box {
      width: 100%;
      white-space: nowrap;
      /* 不换行显示子元素 */
      overflow-x: auto;
      /* 超出部分自动显示滚动条 */
    }

    .day-button,
    .day-button-selected {
      width: 120rpx;
      height: 142rpx;
      background: #ffffff;
      border-radius: 8rpx;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24rpx 16rpx 20rpx 18rpx;
      box-sizing: border-box;
      margin-right: 16rpx;

      span {
        font-size: 30rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 400;
        margin-bottom: 10rpx;
      }
    }

    .day-button {
      border: none;
      color: #222222;
    }

    .day-button-selected {
      border: 1px solid #ff711e;
      color: #ff711e;
    }
  }

  .line {
    width: 100%;
    height: 0.8rpx;
    background: #c7e0e9;
    /* border: 0.8rpx solid #c7e0e9; */
    /* margin-top: 12rpx; */
  }

  .choose-consultant {
    padding: 0rpx 32rpx 28rpx 32rpx;

    .consultant-card {
      /* background: url($img-base + "careerPath/myConsultBg.png") no-repeat; */
      background-size: 100% 100%;
      background: #ffffff;
      border-radius: 24rpx;
      padding: 24rpx;
      position: relative;
      margin-bottom: 20rpx;

      .online-chat {
        position: absolute;
        top: 20rpx;
        right: 20rpx;

        .btn {
          width: 166rpx;
          height: 52rpx;
        }
      }

      .gotoBook,
      .connotBook {
        width: 136rpx;
        height: 52rpx;
        border-radius: 25rpx;
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        color: #ffffff;
      }

      .gotoBook {
        background: #ff711e;

        .white-arrow {
          width: 20rpx;
          height: 20rpx;
          margin-left: 4rpx;
        }

        .text {
          font-size: 24rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          color: #ffffff;
        }
      }

      .connotBook {
        background: #c2c2c2;
      }

      .header {
        display: flex;

        .avatar-box {
          position: relative;
          margin-right: 24rpx;

          .avatar {
            width: 120rpx;
            height: 142rpx;
            border-radius: 16rpx;
            object-fit: cover;
          }

          .status {
            width: 120rpx;
            height: 64rpx;
            position: absolute;
            /* background: linear-gradient(
              180deg,
              rgba(237, 248, 253, 0) 0%,
              #67b98e 100%
            ); */
            border-radius: 25rpx 25rpx 14rpx 14rpx;
            bottom: -1rpx;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            font-size: 24rpx;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            color: #ffffff;
            padding-bottom: 4rpx;
          }
        }

        .info-box {
          .name-box {
            display: flex;
            align-items: center;
            color: #333333;

            .name {
              font-size: 32rpx;
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 600;
              color: #424242;
            }

            .vip {
              width: 32rpx;
              height: 32rpx;
              margin-left: 2rpx;
            }
          }

          .number-box {
            display: flex;
            align-items: center;
            font-size: 28rpx;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 600;
            color: #cecece;
            margin-top: 18rpx;

            .star {
              width: 24rpx;
              height: 24rpx;
              margin-right: 12rpx;
            }

            .line {
              width: 2rpx;
              height: 22rpx;
              background: #7e99ab;
              margin: 0 20rpx;
            }

            .count {
              font-size: 28rpx;
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 600;
              color: #424242;
              margin: 0 12rpx;
            }

            .text {
              color: #888888;
            }

            .name {
              color: #424242;
            }
          }

          .tag-box {
            display: flex;
            margin-top: 14rpx;

            .tag {
              line-height: 44rpx;
              height: 44rpx;
              text-align: center;
              background: #fef9e3;
              border-radius: 4rpx;
              opacity: 0.73;
              padding: 0 14rpx;
              color: #a26d32;
              font-weight: 400;
              font-size: 24rpx;

              &:not(:last-child) {
                margin-right: 12rpx;
              }
            }
          }
        }
      }

      .comment-box {
        padding: 20rpx 22rpx;
        /* background: linear-gradient(114deg, #1a274f 0%, #3f4f7a 100%); */
        background: #f6f6f6;
        border-radius: 16rpx;
        opacity: 0.73;
        margin-top: 30rpx;
        position: relative;

        .message-box {
          position: absolute;
          left: 20rpx;
          top: 21rpx;
          display: flex;

          .message {
            width: 32rpx;
            height: 32rpx;
            flex-shrink: 0;
            margin-right: 6rpx;
            margin-top: 4rpx;
          }

          .text {
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #888888;
            display: inline-block;
            flex-shrink: 0;
          }
        }

        .comment {
          font-size: 28rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #333333;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2; // 控制多行的行数
          -webkit-box-orient: vertical;
          text-indent: 4em;
        }
      }
    }

    .scrollview-consultant {
      height: 70vh;
      overflow-y: scroll;
    }
  }
}</style>
